<template>
	<view class="">
		<view class="card-page">
			<swiper indicator-dots class="card-swiper" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(card, index) in cards" :key="index">
					<view class="card">
						<!-- 头像和名称 -->
						<view class="header">
							<u--image :src="card.avatar" @click="goPhotoDetail(card.id)" shape="circle" width="80rpx"
								height="80rpx"></u--image>
							<view class="name">
								<u--text :text=" card.name "></u--text>
							</view>
							<u-button type="primary" text="关注" size="mini"
								style="width: 40rpx; height: 30rpx; margin-left: 10px ;"></u-button>
						</view>
						<!-- 价格 -->
						<!-- 点赞数 -->
						<view class="likes">
							<text class="price">￥{{card.price}}</text>
							<u-icon :name="isLike?'heart':'heart-fill'" size="24" @click="changeLike"></u-icon>
							<text class="likes-count">{{ card.likes }}</text>
						</view>

						<!-- 照片和描述 -->
						<view class="content">
							<image class="photo" :src="card.photo" @click="goPhotoDetail(card.id)" />
							<text class="description">{{ card.description }}</text>
						</view>

						<view class="comment">
							<view class="iconfont icon-pinglun" style="width: 60px;" @click="showPopup">评论:</view>
							<view class="message">好看! 好看! 好看! 好看!好看!好看好看 </view>
							<view class="iconfont icon-dianzan"></view>
						</view>
					</view>
				</swiper-item>
			</swiper>


			<!-- 当前卡片索引 -->
			<!-- <view class="indicator">
				<view class="indicator-dot" :class="{ active: index === currentIndex }" v-for="(card, index) in cards"
					:key="index"></view>
			</view> -->
			<template>
				<u-popup closeable @close="closeShow" :show="show" mode="bottom">
					<scroll-view class="container-remark" scroll-y>
						<view class="numberRemark">3719条评论</view>
						<view>
							<view class="UserRemarkBox">
								<image class="UserAvatar" src="../../static/logo.png"></image>
								<view class="UserRemark">
									<view class="title">抱萝卜的逗逼兔子</view>
									<textarea v-model="userRemarked" style="height: 67rpx;margin: 10rpx 0;"></textarea>
									<view class="reply">
										<view>五小时前 · 四川</view>
										<view>回复</view>
										<view class="iconfont"><text class="iconfont icon-aixin1"></text>1.1万</view>
										<view class="iconfont icon-hunyin"></view>
									</view>
									<view class="moreReply">—展开2089条回复<text
											class="iconfont icon-xiangxiajiantou"></text>
									</view>
								</view>
							</view>
						</view>

						<view>
							<view class="UserRemarkBox">
								<image class="UserAvatar" src="../../static/logo.png"></image>
								<view class="UserRemark">
									<view class="title">抱萝卜的逗逼兔子</view>
									<textarea v-model="userRemarked" style="height: 67rpx;margin: 10rpx 0;"></textarea>
									<view class="reply">
										<view>五小时前 · 四川</view>
										<view>回复</view>
										<view class="iconfont"><text class="iconfont icon-aixin1"></text>1.1万</view>
										<view class="iconfont icon-hunyin"></view>
									</view>
									<view class="moreReply">—展开2089条回复<text
											class="iconfont icon-xiangxiajiantou"></text>
									</view>
								</view>
							</view>
						</view>

						<view>
							<view class="UserRemarkBox">
								<image class="UserAvatar" src="../../static/logo.png"></image>
								<view class="UserRemark">
									<view class="title">抱萝卜的逗逼兔子</view>
									<textarea v-model="userRemarked" style="height: 67rpx;margin: 10rpx 0;"></textarea>
									<view class="reply">
										<view>五小时前 · 四川</view>
										<view>回复</view>
										<view class="iconfont"><text class="iconfont icon-aixin1"></text>1.1万</view>
										<view class="iconfont icon-hunyin"></view>
									</view>
									<view class="moreReply">—展开2089条回复<text
											class="iconfont icon-xiangxiajiantou"></text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</u-popup>
			</template>
		</view>
		<view class="distance">
			<text>距您直线距离{{distance}}米</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				userRemarked: '好容易多可以凉快两天，全给老子整没了',
				currentIndex: 0,
				// 商家距离
				distance: 500,
				cards: [{
						id: 1,
						avatar: 'https://img1.baidu.com/it/u=898692534,2766260827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						name: '张凤',
						likes: 10,
						photo: 'https://img2.baidu.com/it/u=974228145,2720445956&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500',
						description: '这是一张美丽的风景',
						comments: 5,
						price: 99
					},
					{
						id: 2,
						avatar: 'https://img1.baidu.com/it/u=898692534,2766260827&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
						name: '张凤',
						likes: 19,
						photo: 'https://img2.baidu.com/it/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
						description: '这是一个好看的天空',
						comments: 5,
						price: 79
					},
					// 添加更多的卡片数据...
				],
				// 是否点赞
				isLike: true
			};
		},
		methods: {
			swiperChange(event) {
				this.currentIndex = event.detail.current;
			},
			goPhotoDetail(id) {
				uni.navigateTo({
					url: `/PackageB/photoDetail/photoDetail?id=${id}`
				})
			},
			showPopup() {
				this.show = true
			},
			closeShow() {
				this.show = false
			},
			changeLike() {
				this.isLike = !this.isLike
			}
		}
	};
</script>

<style lang="scss">
	/* 样式根据实际需求进行调整 */
	.card-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20px;
		height: 58vh;
	}

	.card-swiper {
		width: 95%;
		height: 100%;
	}

	.card {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 10px 10px 10px 0px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.header {

		display: flex;
		justify-content: space-between;
		align-items: center;
		float: left;
		padding-bottom: 10px;
		padding-left: 10px;


	}

	.price {
		color: #f1585a;
		// margin-left: 50rpx;
		margin-right: 60rpx;
		font-size: 16px;
	}

	// .avatar {
	// 	width: 40px;
	// 	height: 40px;
	// 	// border-radius: 50%;
	// }

	.name {
		width: 150rpx;
		height: 100%;
		margin-left: 10px;
		font-size: 16px;
		font-weight: bold;
	}

	.likes {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
		margin-right: 10px;
		font-size: 14px;
		align-items: center;
	}

	.likes-count {
		margin-left: 5px;
	}

	.content {
		margin-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.photo {
		width: 100%;
		object-fit: cover;
	}

	.description {
		margin-top: 10px;
		font-size: 14px;
	}

	.comment {
		display: flex;
		align-items: center;
		margin-top: 15px;
	}

	.comment-input {
		flex: 1;
		height: 30px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 14px;
		margin-left: 10px;
	}

	.comment-count {
		padding-left: 10px;
		font-size: 14px;
		padding-right: 10px;
	}

	.indicator {
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}

	.indicator-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #ccc;
		margin: 0 5px;
	}

	.indicator-dot.active {
		background-color: #333;
	}

	.container-remark {
		height: 800rpx;
		padding: 20rpx;

		.numberRemark {
			margin-top: 20rpx;
			text-align: center;
		}

		.UserRemarkBox {
			display: flex;
			margin-top: 20rpx;

			.UserAvatar {
				height: 50rpx;
				width: 50rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.UserRemark {
				.title {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}

				.reply {
					display: flex;
					justify-content: space-around;
					margin-bottom: 10rpx;
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}

				.moreReply {
					font-size: $uni-font-size-base;
					color: $uni-text-color-grey;
				}
			}
		}
	}

	.distance {
		font-size: $uni-font-size-base;
		color: #609bbb;
		padding: 20rpx 40rpx;

	}
</style>